import React, { useRef, useEffect, useState, Suspense } from 'react';

import { useSelector } from 'react-redux';

import Swiper from '@c/swiper/Swiper.tsx';
import Touch from '@c/touch/Touch.tsx';
import Tabbar from '@/itemComponent/topbar/Tobbar.tsx';

export default function Index() {
  const [pauseIcon, setPauseIcon] = useState(false);
  const [videoIndex, setVideoIndex] = useState(0);
  const [videoList, setVideoList] = useState(['a.mp4', 'b.mp4', 'c.mp4', 'd.mp4', 'e.mp4']);


  // 视频点击
  const videoClick = (item: string, index: number) => {
    let video: any = document.querySelectorAll('.home .HomeVideo')[index];
    if (video.paused) {
      video.play();
      setPauseIcon(false);
    } else {
      video.pause();
      setPauseIcon(true);
    }
  };
  // 滑动切换视频
  const togglePage = (index: number, type: string) => {
    // setVideoIndex(index);
    setVideoIndex(index);
    const video: any = document.querySelectorAll('.home .HomeVideo');
    if (type === 'next') {
      const prev: any = video[index - 1];
      prev.pause();
      prev.currentTime = 0;
    } else {
      const next: any = video[index + 1];
      next.pause();
      next.currentTime = 0;
    }
    !video[index].src && (video.src = `./static/${videoList[index]}`);
    if (video[index].paused) {
      video[index].play();
      setPauseIcon(false);
    } else {
      video[index].pause();
      setPauseIcon(true);
    }
    if (video[index + 1] && !video[index + 1].src) {
      video[index + 1].src = `./static/${videoList[index + 1]}`;
      video[index + 1].pause();
    }
  };
  useEffect(() => {
    const video: any = document.querySelectorAll('.home .HomeVideo');

    // console.log('asdasda', video);
    if (video[0]) {
      video[0].src = './static/a.mp4';
      if (video[1]) {
        video[1].src = `./static/${videoList[1]}`;
        video[1].pause();
      }
    }
  }, []);

  return (
    <div className="fx1 fx oh fx-d">
      {/* 顶部内容 */}
      <Tabbar className="Tabbar fx0 fx fx-jc-sb"></Tabbar>

      <div className="video-list-box fx1">
        <Swiper className="video-list fx1 oh fx-d fx " direction="y" togglePage={togglePage} scrollClass="scroll-class">
          {videoList.map((item, index) => {
            return (
              <Touch onClick={() => videoClick(item, index)} className="item fx fx0  fx-ai-c" key={index}>
                <i className={`iconfont iconbofang2 pause ${pauseIcon && videoIndex === index ? 'active' : ''}`}></i>
                <video className="video HomeVideo" loop>
                  {/* <source type="video/mp4" /> */}
                </video>
              </Touch>
            );
          })}
        </Swiper>
      </div>
    </div>
  );
}
